<template>
  <div>
    <el-main>
      <!--    条件搜索      -->
      <el-form :inline="true" :model="queryEmployeeVo" class="demo-form-inline" style="float: left;display: block">
        <el-form-item label="用户名">
          <el-input v-model="queryEmployeeVo.username" placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="queryEmployeeVo.phone" placeholder="电话"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="queryEmployeeVo.sex" placeholder="性别">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>

      <!--     按钮     -->
      <div style="float: right;display: block;width: 100%;text-align: left">

        <el-button type="primary" @click="addEmp('add')" plain style="margin-right: 10px">新增
          <li class="el-icon-plus"></li>
        </el-button>
        <el-button type="danger" @click="deleteBatch" plain style="margin-right: 20px">批量删除
          <li class="el-icon-delete"></li>
        </el-button>

        <el-upload
            action="http://localhost:8081/yum/emp/import"
            :headers="headerObj"
            multiple
            :limit="3"
            :on-success="uploadSuccess"
            :show-file-list="false"
            style="display: inline-block;margin-right: 20px">
          <el-button type="info" plain>上传
            <li class="el-icon-upload2"></li>
          </el-button>
        </el-upload>



        <el-button type="warning" @click="exportFile" plain>下载
          <li class="el-icon-download"></li>
        </el-button>



      </div>

      <!--    内容     -->
      <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column

            prop="id"
            label="用户编号"
            width="100"
            align="center">
        </el-table-column>
        <el-table-column
            prop="username"
            label="姓名"
            width="200"
            align="center">
        </el-table-column>
        <el-table-column
            prop="sex"
            label="性别"
            width="100"
            align="center">
        </el-table-column>
        <el-table-column
            prop="phone"
            label="电话"
            width="200"
            align="center">
        </el-table-column>
        <el-table-column
            prop="idNumber"
            label="身份证号"
            show-overflow-tooltip
            align="center">
        </el-table-column>
        <el-table-column prop="state" label="启用状态">
          <template slot-scope="scope" style="text-align: left">
            <el-switch
                v-model="scope.row.status"
                :active-value="1"
                :inactive-value="0"
                @change="switchReceiveStatus($event,scope.row)"
            ></el-switch>
          </template>
        </el-table-column>



        <el-table-column label="操作"
                         align="center">
          <template slot-scope="scope">
            <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">编辑
            </el-button>
            <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--      分页栏-->
      <div style="margin-top: 30px;text-align: center">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="this.queryEmployeeVo.currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="this.queryEmployeeVo.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="this.total">
        </el-pagination>
      </div>

      <!--      修改新增弹窗-->
      <el-dialog :title="title" :visible.sync="dialogFormVisible">
        <el-form :model="employee">
          <el-form-item label="用户名" :label-width="formLabelWidth">
            <el-input v-model="employee.username" autocomplete="off" :disabled="disable"></el-input>
          </el-form-item>
          <el-form-item label="性别" :label-width="formLabelWidth" style="text-align: left">
            <el-select v-model="employee.sex" placeholder="请选择性别">
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="密码" :label-width="formLabelWidth">
            <el-input v-model="employee.password" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="电话" :label-width="formLabelWidth">
            <el-input v-model="employee.phone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="身份证" :label-width="formLabelWidth">
            <el-input v-model="employee.idNumber" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitEmp">提 交</el-button>
        </div>
      </el-dialog>
    </el-main>
  </div>


</template>

<script>

export default {
  name: "ManagerView",
  created() {
    this.loadData();
  },
  data() {
    return {
      tableData: [],
      currentPage1: 5,
      queryEmployeeVo: {
        currentPage: 1,
        pageSize: 10,
        username: '',
        sex: "",
        storeId: ''
      },
      total: 0,
      dialogTableVisible: false,
      dialogFormVisible: false,
      formLabelWidth: '120px',
      employee: {},
      ids: [],
      multipleSelection: [],
      op: '',
      title: '新增用户',
      disable: false,
      headerObj: {
        Authorization: window.localStorage.getItem("Authorization")
      }
    }
  },
  methods: {
    resetData(){
      this.employee = {
        id: "",
        username: '',
        password: '',
        sex: '',
        phone: '',
        idNumber: '',
        status: 0,
      }
      this.dialogFormVisible = false
    },

    deleteBatch(){

      if (this.ids.length){
        this.removeMethod()
        // this.loadData()
      }
    },

    handleSelectionChange(val) {
      console.log(val)
      this.ids = []
      let _this = this
      val.forEach(function (emp) {
        _this.ids.push(emp.id)
      })
      console.log(this.ids)
      this.multipleSelection = val;
    },
    toggleSelection(rows) {
      console.log("toggle:", rows)
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleEdit(index, row) {
      console.log(index, row)
      this.employee = {
        id: row.id,
        username: row.username,
        password: row.password,
        sex: row.sex,
        phone: row.phone,
        idNumber: row.idNumber,
        status: row.status,
      }
      this.dialogFormVisible = true
      this.title = "修改信息"
      this.op = 'edit'
      this.disable = true
      // 编程式路由来进行组件跳转
      //this.$router.push({path: '/saveOrUpdate/' + row, replace: true})
    },
    handleDelete(index, row) {
      this.ids = []
      this.ids.push(row.id)
      this.removeMethod()
    },

    removeMethod() {
      this.$confirm('此操作将永久删除文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //删除请求发送
        this.$axios.get(
            '/emp/remove?ids=' + this.ids
        ).then((response) => {
          if (response.data.result) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.loadData();
          } else {
            this.$message({
              type: 'error',
              message: '删除失败!'
            });
          }
        }).catch((reason) => {
          this.ids=[]
          console.log(reason)
        })
        this.ids = []
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      }).finally(()=>{
        this.ids = []
      });
    },

    handleSizeChange(val) {
      this.queryUserVo.pageSize = val
      this.loadData()
    }
    ,
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.queryUserVo.currentPage = val
      this.loadData()
    },
    loadData() {
      let _this = this
      this.$axios.post("/emp/queryAll", this.queryEmployeeVo).then(
          function (response) {
            if (response.data.result){
              console.log(_this.tableData = response.data.data.pageInfo.list)
              _this.tableData = response.data.data.pageInfo.list
              _this.total = response.data.data.pageInfo.total
            }else {
              _this.$message.error(response.data.message)
            }
          }
      )
    }
    ,
    submitEmp(){
      let path = ''
      if (this.op =='add'){
        path = "/emp/add"
      }else {
        path = "/emp/update"
      }
      let _this = this
      this.axios.post(path, this.employee).then(response => {
        console.log(response)
        if (response.data.result) {
          _this.$message.success(response.data.message);
          _this.loadData()
        } else {
          _this.$message.error(response.data.message);
        }
      })
      this.resetData()
    },
    onSubmit() {
      console.log(1111)
      this.loadData()
    },
    exportFile(){
      window.open("http://localhost:8081/yum/emp/export")
    },
    uploadSuccess(){
      this.$message.success("文件上传成功")
      this.loadData()
    },
    addEmp(op){
      this.op = op
      this.title = '新增用户'
      this.dialogFormVisible = true
      this.disable = false
    },
    isOpen(row){
      console.log(row)
      return true
    },

    //启用状态设置
    switchReceiveStatus(val, row){
      let _this = this
      console.log(row)
      this.axios.get("/emp/setStatus/"+row.id+"/"+row.status).then(response => {
        console.log(response)
        if (response.data.result){
          _this.$message.success("设置成功")

        }else {
          _this.$message.error("设置失败，请稍后重试")
          row.status = response.data.data.status
        }
      })
    }
  }
}

</script>

<style scoped>

</style>
